'use client'
import { useState, useEffect } from 'react'
import { Button } from 'flowbite-react'
import { FaPlus } from 'react-icons/fa'
import PageContainer from '@/components/PageContainer'
import ToastMessage from '@/components/ToastMessage'
import CardList from '@/components/deck/CardList'
import DeckList from '@/components/deck/DeckList'
import CardEditorModal from '@/components/deck/CardEditorModal'
import CardGroupEditor from '@/components/deck/CardGroupEditor'
import { storage } from '@/services/storage'
import { useDeckManagement } from '@/hooks/useDeckManagement'

export default function DecksPage() {
  const [mounted, setMounted] = useState(false)
  const [showNewDeckModal, setShowNewDeckModal] = useState(false)
  const [showCardEditor, setShowCardEditor] = useState(false)
  const [showCardList, setShowCardList] = useState(false)
  const [newDeckName, setNewDeckName] = useState('')
  const [newDeckDescription, setNewDeckDescription] = useState('')
  const [editingCard, setEditingCard] = useState(null)

  const {
    decks,
    selectedDeck,
    deckCards,
    toast,
    setSelectedDeck,
    setDeckCards,
    handleDeleteCard,
    handleCreateDeck,
    handleSaveCard,
    handleDeleteDeck
  } = useDeckManagement()

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) return null

  const formatDate = (date) => {
    return new Date(date).toLocaleDateString()
  }

  const handleViewCards = (deck) => {
    setSelectedDeck(deck)
    setDeckCards(storage.getCardsByDeck(deck.id))
    setShowCardList(true)
  }

  const handleAddCard = (deck) => {
    setSelectedDeck(deck)
    setShowCardEditor(true)
  }
  const handleEditCard = (card) => {
    setEditingCard(card)
    setShowCardEditor(true)
    setShowCardList(false)  // 关闭卡片列表模态框
  }


  return (
    <PageContainer>
      <div className="flex justify-between items-center mb-8">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">我的卡片组</h1>
          <p className="text-gray-600 mt-2">管理您的学习内容和记忆卡片</p>
        </div>
        <Button size="lg" color="blue" onClick={() => setShowNewDeckModal(true)}>
          <FaPlus className="mr-2" />
          创建新卡片组
        </Button>
      </div>

      <DeckList
        decks={decks}
        onViewCards={handleViewCards}
        onAddCard={handleAddCard}
        formatDate={formatDate}
        onDeleteDeck={handleDeleteDeck}
      />

      <CardGroupEditor
        show={showNewDeckModal}
        onClose={() => setShowNewDeckModal(false)}
 
        setNewDeckName={setNewDeckName}
        setNewDeckDescription={setNewDeckDescription}
        setShowNewDeckModal={setShowNewDeckModal}
        handleCreateDeck={() => {
          handleCreateDeck(newDeckName, newDeckDescription)
          setShowNewDeckModal(false)
          setNewDeckName('')
          setNewDeckDescription('')
        }}
        newDeckName={newDeckName}
        newDeckDescription={newDeckDescription}
      />

      <CardList
        show={showCardList}
        onClose={() => setShowCardList(false)}
        selectedDeck={selectedDeck}
        deckCards={deckCards}
        onAddCard={handleAddCard}
        formatDate={formatDate}
        // onEditCard={setEditingCard}
        onEditCard={handleEditCard}
        onDeleteCard={handleDeleteCard}
      />

      <CardEditorModal
        show={showCardEditor}
        onClose={() => setShowCardEditor(false)}
        selectedDeck={selectedDeck}
        onCancel={() => {
          setShowCardEditor(false)
          setEditingCard(null)
        }}
        onSave={(cardData) => {
          handleSaveCard(cardData, editingCard, selectedDeck)
          setShowCardEditor(false)
          setEditingCard(null)
        }}
        editingCard={editingCard}
      />

      {toast.show && (
        <ToastMessage
          message={toast.message}
          onDismiss={() => setToast({ show: false, message: '' })}
        />
      )}
    </PageContainer>
  )
}